<html>
  <head>
    <style>
      html, body {
        margin: 0;
        width: 100%;
        height: 100%
      }
      body {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <h3>Upload a video to transcode to ogv (theora) and play!</h3>
    <video id="output-video" controls></video><br/>
    <input type="file" id="uploader">
    <p id="message">Upload a video</p>
    <script type="text/javascript" src="./js/utils.js"></script>
    <script type="text/javascript">
      const message = document.getElementById('message');
      const transcode = async ({ target: { files } }) => {
        const IN_FILE_NAME = 'video.avi';
        const OUT_FILE_NAME = 'video.ogv';
        const args = ['-i', IN_FILE_NAME, '-c:v', 'libtheora', OUT_FILE_NAME];
        message.innerHTML = 'Writing file to MEMFS';
        const data = new Uint8Array(await readFromBlobOrFile(files[0]));
        const now = Date.now();
        console.time(`[${now}] ${files[0].name} execution time`);
        message.innerHTML = 'Start to transcode';
        const { file } = await runFFmpeg(IN_FILE_NAME, data, args, OUT_FILE_NAME)
        const video = document.getElementById('output-video');
        video.src = URL.createObjectURL(new Blob([file.buffer], { type: 'video/ogv' }));
        console.timeEnd(`[${now}] ${files[0].name} execution time`);
      };
      document.getElementById('uploader').addEventListener('change', transcode);
    </script>
    <script type="text/javascript" src="../../dist/ffmpeg-core.js"></script>
  </body>
</html>
